import {useState, useEffect} from 'react'
import { Modal, Skeleton } from 'antd'
import style from './index.module.less'
import { ServiceSchema } from '@src/components/schema/service'
import { FileSchema } from '@src/components/schema/fileSchema'

function renderFile (file: FileSchema[]) {
  if (file instanceof Array && file.length > 0) {
    return (
      <div className={style['text-cell']}>
        <span>送达材料：</span>
        {file.map((li, i) => {
          return (
            <span key={i}>
              <span>{i+1}、</span>
              <a href={li.path} target='_blank' download>{li.original_filename}</a>
              {i < file.length - 1 && '；'}
            </span>
          )
        })}
      </div>
    )
  }
}

interface Props {
  data: ServiceSchema | null
  visible: boolean
  hide: () => void
}

function Main ({ visible, hide, data: d}: Props) {
  if (!d) {
    return <span />
  }
  return (
    <Modal
      visible={visible}
      title='查看详情'
      width={600}
      onCancel={hide}
      footer={null}
      maskClosable={false}
      destroyOnClose
    >
      <div className={style['text-cell']}>送达情况：{d.status || '无'}</div>
      <div className={style['text-cell']}>仲裁地位：{d.action_subject || '无'}</div>
      <div className={style['text-cell']}>手机号码：{d.mobile || '无'}</div>
      <div className={style['text-cell']}>邮箱：{d.email || '无'}</div>
      <div className={style['text-cell']}>地址类型：{d.type || '无'}</div>
      <div className={style['text-cell']}>收件人：{d.contract || '无'}</div>
      <div className={style['text-cell']}>送达短信：{d.sms_content || '无'}</div>
      <div className={style['text-cell']}>送达邮件：{d.email_content || '无'}</div>
      {renderFile(d.file)}
      <div className={style['text-cell']}>备注：{d.remark || '无'}</div>
    </Modal>
  )
}

export default Main
